'use strict';

import {getFileDir} from "../utils";

const Server = require('../server');
import store from "@/store";
import app from "../app";

const { each } = $;

const addFileToDOM = (category, algorithm, file, explanation, isScratchPaper) => {
  var $file = $('<button>');

  // 如果是 Scratch Paper，添加编辑功能
  if (isScratchPaper) {
    $file.attr('contenteditable', 'true') // 启用可编辑状态
      .attr('data-file', file)
      .on('blur', function () {
        const newName = $(this).text().trim();
        const oldName = $(this).attr('data-file');

        if (newName !== oldName) {
          // 更新 data-file，表示文件名被改了
          $(this).attr('data-file', newName);
          // 可选：保存内容映射
          let dir = getFileDir('scratch', '', oldName);
          let Newdir = getFileDir('scratch', '', newName);
          const cachedFile = app.getCachedFile(dir);
          app.updateCachedFile(Newdir, cachedFile);
          Server.loadFile(category, algorithm, newName, explanation);
        }
      })
      .click(function () {
        // 只加载内容，不在这里获取名字
        const realName = $(this).attr('data-file');
        Server.loadFile(category, algorithm, realName, explanation);

        $('.files_bar > .wrapper > button').removeClass('active');
        $(this).addClass('active');
      })
      .text(file);
  } else {
    $file.append(file)
      .attr('data-file', file)
      .click(function () {
        Server.loadFile(category, algorithm, file, explanation);
        $('.files_bar > .wrapper > button').removeClass('active');
        $(this).addClass('active');
      });
  }

  $('.files_bar > .wrapper').append($file);

  // 仅 Scratch Paper 模式允许右键删除
  if (isScratchPaper) {
    $file.on('contextmenu', function (e) {
      e.preventDefault();
      $(this).remove();
      $('.files_bar > .wrapper > button').not('.options-button').first().click();
      $('.files_bar > .wrapper').scroll();
    });
  }

  return $file;
};

module.exports = (category, algorithm, files, requestedFile) => {
  const wrapper = $('.files_bar > .wrapper');
  wrapper.empty();

  const isScratchPaper = store.getters.isScratchPaper;

  each(files, (file, explanation) => {
    var $file = addFileToDOM(category, algorithm, file, explanation, isScratchPaper);
    $file.addClass('tab_button');
    wrapper.append($file);  // 确保添加顺序
    if (requestedFile && requestedFile == file) $file.click();
  });

  if (!requestedFile) wrapper.find('button').first().click();
  wrapper.scroll();

  // -------- 插入选项按钮 --------
  if (!isScratchPaper) return;

  const $optionsBtn = $(`
    <button class="tab_button options-button">
      <i class="fa fa-plus"></i>
    </button>
  `);

  const $menu = $(`
    <div class="options-menu">
      <button class="add-vis-btn">Visualization</button>
      <button class="add-cpp-algo-btn">C++_Template</button>
      <button class="add-java-algo-btn">Java_Template</button>
      <button class="add-python-algo-btn">Python_Template</button>
      <button class="add-javascript-algo-btn">JS_Template</button>
      <button class="add-typescript-algo-btn">TS_Template</button>
      <button class="add-golang-algo-btn">Go_Template</button>
      <button class="add-rust-algo-btn">Rust_Template</button>
      <button class="add-php-algo-btn">Php_Template</button>
      <button class="add-csharp-algo-btn">C#_Template</button>
    </div>
  `);

  wrapper.append($optionsBtn);
  $('body').append($menu); // 改为加到 body，避免被 wrapper 限制位置

  $optionsBtn.on('click', (e) => {
    e.stopPropagation();

    const offset = $optionsBtn.offset();

    $menu.css({
      position: 'absolute',
      top: offset.top + $optionsBtn.outerHeight(),
      left: offset.left,
      display: 'block',
      background: 'rgb(36, 36, 36)',
      border: '1px solid #505050',
      padding: '8px 16px',
      zIndex: 9999,
      boxShadow: '0 4px 8px rgba(0, 0, 0, 0.6)',
    });

    $(document).on('click', () => {
      $menu.hide();
    });
  });

  $(document).on('click', () => {
    $menu.hide();
  });

  // 在这里修改每个模板按钮的事件，添加到DOM
  const createFileButton = (button, template, label) => {
    return $menu.find(button).on('click', () => {
      var $file = addFileToDOM(category, algorithm, template, label, isScratchPaper);
      $file.addClass('tab_button');
      wrapper.find('.options-button').before($file);  // 确保添加顺序
      $file.click();

      $file.on('contextmenu', (e) => {
        e.preventDefault();
        $file.remove();
        wrapper.find('button').first().click();
        wrapper.scroll();
      });

      $menu.hide();
    });
  };

  createFileButton('.add-vis-btn', 'basic','这是一个新的可视化代码');
  createFileButton('.add-cpp-algo-btn', 'cpp_template','这是一个新的C++算法模板');
  createFileButton('.add-java-algo-btn', 'java_template','这是一个新的Java算法模板');
  createFileButton('.add-python-algo-btn', 'python_template','这是一个新的Python算法模板');
  createFileButton('.add-javascript-algo-btn', 'js_template','这是一个新的JS算法模板');
  createFileButton('.add-typescript-algo-btn', 'ts_template','这是一个新的TS算法模板');
  createFileButton('.add-golang-algo-btn', 'go_template','这是一个新的Go算法模板');
  createFileButton('.add-rust-algo-btn', 'rust_template','这是一个新的Rust算法模板');
  createFileButton('.add-php-algo-btn', 'php_template','这是一个新的PHP算法模板');
  createFileButton('.add-csharp-algo-btn', 'csharp_template','这是一个新的C#算法模板');
};
